<template>
    <div :class="`shop-review-address ${mode}`">
        <div class="review-address-delivery-type">
            <div class="delivery-label">配送方式</div>
            <div class="delivery-value" @click="changeDeliveryType">
                <div class="delivery-text" :style="`${fontColor}`">{{ deliveryText[deliveryType] }}</div>
                <MiniIcon name="down" size="12" theme="#7D7D83" />
            </div>
        </div>
        <div :class="`address-info ${mode}`" @click="chooseAddress">
            <div class="address-value">
                <MiniIcon class="address-icon" :size="20" slot="icon" name="address" :mode="mode" :theme="`${mode === 'white' ? '#333333' : '#ffffff'}`" :styleMode="styleMode" />
                <div class="address-text title-color">
                    <div v-if="addressInfo">{{addressInfo.address}}{{addressInfo.building_number}}</div>
                    <div v-else>请选择地址</div>
                </div>
                <MiniIcon :size="16" name="right" :mode="mode" theme="#7D7D83" :styleMode="styleMode" />
            </div>
            <div v-if="addressInfo" class="contact-info">
                <div class="contact-name">{{addressInfo.contact}}</div>
                <div class="contact-mobile">{{addressInfo.mobile}}</div>
            </div>
        </div>
        <div v-if="deliveryType == DELIVERY_TYPE.CITY_EXPRESS" class="delivery-time" @click="changeDeliveryTime">
            <MiniIcon :size="20" name="time" :theme="`${mode === 'white' ? '#333333' : '#ffffff'}`" />
            <div class="delivery-time-value">{{ bookingDaysText ? `送达时间（${bookingDaysText}）` : '请选择送达时间' }}</div>
            <MiniIcon :size="16" name="right" theme="#7D7D83" />
        </div>
        <template v-if="deliveryType == DELIVERY_TYPE.SELF_PICK_UP">
            <div class="warehouse-info" v-if="warehouseInfo.address">
                <MiniIcon class="address-icon" :size="20" slot="icon" name="eatin" :mode="mode" :theme="`${mode === 'white' ? '#333333' : '#ffffff'}`" :styleMode="styleMode" />
                <div class="address-text title-color">自提点：{{ warehouseInfo.address }}</div>
            </div>
            <div class="delivery-time" @click="changeDeliveryTime">
                <MiniIcon :size="20" name="time" :theme="`${mode === 'white' ? '#333333' : '#ffffff'}`" />
                <div class="delivery-time-value">{{ bookingDaysText ? `自提日期（${bookingDaysText}）` : '请选择自提日期' }}</div>
                <MiniIcon :size="16" name="right" theme="#7D7D83" />
            </div>
        </template>
        <!-- 修改配送方式 -->
        <ReviewDeliveryType
            ref="deliverytype"
            :havePickUp="havePickUp"
            :haveExpress="haveExpress"
            :haveCity="haveCity"
            :deliveryType="deliveryType"
            :isCityBeyond="isCityBeyond"
            @ensure="changeOrderReviewDeliveryType"
        />
        <!-- 修改配送时间 -->
        <ReviewSelectDays
            ref="selectdays"
            :defaultValue="defaultDayValue"
            :length="bookingDays"
            :isSelf="deliveryType == DELIVERY_TYPE.SELF_PICK_UP"
            @ensure="ensureChagneDays"
        />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Cell, CellGroup } from 'vant';
import { TechCell, TechIcon, MiniIcon } from '@components/base';
import ReviewDeliveryType from './ReviewDeliveryType';
import ReviewSelectDays from './ReviewSelectDays';
import ModeMixin from '@common/mixin';

import { DELIVERY_TYPE, DELIVERY_TYPE_TEXT } from '@constants/shop';

import logger from '@common/logger';
import { getBrandAllowBooking, getBrandBookingDays } from '@biztools/info';
import { getDayText } from '@biztools/review';

export default {
    name: 'ReviewAddress', // 商城订单地址
    mixins: [ModeMixin],
    components: {
        Cell,
        TechCell,
        CellGroup,
        TechIcon,
        MiniIcon,
        ReviewDeliveryType,
        ReviewSelectDays,
    },
    props: {
        warehouseInfo: {
            type: Object,
            default: () => {},
        },
    },
    computed: {
        ...mapState({
            deliveryType: state => state.review.deliveryType,
            addressInfo: state => state.review.addressInfo,
            bookDays: state => state.review.bookDays,
        }),
        // 支持快递
        haveExpress() {
            return true;
        },
        // 支持自提
        havePickUp() {
            return true;
        },
        // 支持同城
        haveCity() {
            return true;
        },
        // 是否超出配送范围
        isCityBeyond() {
            return true;
        },
        bookingDaysText() {
            return this.bookDays != null ? getDayText(this.bookDays) : '';
        },
    },
    data() {
        const isAllowBooking = getBrandAllowBooking();
        return {
            defaultDayValue: -1,
            DELIVERY_TYPE,
            deliveryText: DELIVERY_TYPE_TEXT,
            bookingDays: isAllowBooking ? getBrandBookingDays() : 1,
        };
    },
    methods: {
        ...mapActions([
            'changeOrderReviewDeliveryType',
            'changeOrderReviewBookDays',
        ]),
        chooseAddress() {
            this.$router.push('/shop/select-address');
        },
        changeDeliveryType() {
            this.$refs.deliverytype.show();
        },
        changeDeliveryTime() {
            this.$refs.selectdays.show();
        },
        ensureChagneDays(value) {
            logger.debugger('选择的结果为：', value);
            this.changeOrderReviewBookDays(value);
        },
    },
};
</script>

<style lang="less">
.shop-review-address {
    .m(@shop-bag-gap);
    .mode-white();
    background-color: @white;
    .p-h(@shop-gap-md);
    .p-v(@shop-gap);
    .radius-and-shandow();
    .review-address-delivery-type {
        min-height: 40px;
        .flex-row-between();
        align-items: center;
        .delivery-label {
            font-size: @font-size-md;
        }
        .delivery-value {
            border: 0.5px solid #E5E5E5;
            height: 28px;
            width: 65px;
            font-size: @font-size-sm;
            border-radius: 28px;
            .p-h(@gap-sm);
            .flex-row-center;
            .delivery-text {
                flex: 1;
                .t-c();
            }
        }
    }
    .warehouse-info {
        .flex();
        min-height: 40px;
        align-items: center;
        .address-text {
            flex: 1;
            .t-l();
            .m-l(@gap-sm);
            font-size: @shop-font-size-md;
            font-weight: 500;
            .flex();
            .text-overflow-line(2);
        }
    }
    .address-info {
        .address-value {
            min-height: 40px;
            .flex-row-between();
            justify-content: space-between;
            align-items: center;
            .address-text {
                flex: 1;
                .t-l();
                .m-l(@gap-sm);
                font-size: @shop-font-size-md;
                font-weight: 500;
                .flex();
                .text-overflow-line(2);
            }
        }
        .contact-info {
            .flex();
            .m-t(@shop-bag-gap);
            align-items: center;
            font-size: @shop-font-size;
            color: @tip-color;
            opacity: .7;
            .contact-name {
                .m-r(@shop-gap-md);
            }
        }
    }
    .delivery-time {
        min-height: 40px;
        .flex-row-between();
        align-items: center;
        .delivery-time-value {
            flex: 1;
            font-size: @shop-font-size-md;
            .m-l(@gap-sm);
            font-weight: 500;
        }
    }
}
</style>
